<template>
  <div class="sys-setting card-box publicdetails">
    <div class="sys-setting-title">
      <div class="sys-setting-title-text">连接设置</div>
      <el-button @click="funShowDia" type="primary">
        <el-icon :size="size" :color="color"> <Edit /> </el-icon>编辑</el-button
      >
    </div>
    <div class="publicdetails-module">
      <div
        class="publicdetails-list"
        style="display: flex; margin-bottom: 18px"
      >
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">服务器地址</div>
          <div class="public-text-value public-left">
            {{
              "超出长度就换行超出长度就换行超出长度就换行超出长度就换行超出长度就换行超出长度就换行超出长度就换行超出长度就换行超出长度就换行超出长度就换行"
            }}
          </div>
        </div>
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">端口地址</div>
          <div class="public-text-value public-left">
            {{ "超出长度就换行" }}
          </div>
        </div>
      </div>
      <div
        class="publicdetails-list"
        style="display: flex; margin-bottom: 18px"
      >
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">采集间隔</div>
          <div class="public-text-value public-left">
            {{
              "超出长度就换行超出长度就换行超出长度就换行超出长度就换行超出长度就换行超出长度就换行超出长度就换行超出长度就换行超出长度就换行超出长度就换行"
            }}
          </div>
        </div>
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">支持协议</div>
          <div class="public-text-value public-left">
            {{
              "超出长度就换行超出长度就换行超出长度就换行超出长度就换行超出长度就换行超出长度就换行超出长度就换行超出长度就换行超出长度就换行超出长度就换行"
            }}
          </div>
        </div>
      </div>
    </div>
  </div>
  <public-dialog v-model="showDia" title="编辑" @confirmDialog="doSubmit">
    <el-form
      ref="diaFormRef"
      :model="diaForm"
      :rules="diaRules"
      label-width="auto"
      label-position="top"
      class="csin-form"
    >
      <el-form-item label="服务器地址：" prop="name">
        <el-input
          v-model="diaForm.name"
          clearable
          maxlength="20"
          style="width: 100%"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="端口地址：" prop="projectNo">
        <el-input
          v-model="diaForm.projectNo"
          clearable
          maxlength="40"
          style="width: 100%"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="采集间隔：" prop="person">
        <el-input
          v-model="diaForm.person"
          clearable
          maxlength="30"
          style="width: 100%"
          placeholder="请输入"
        >
          <template #suffix> 分钟 </template>
        </el-input>
      </el-form-item>
      <el-form-item label="支持协议：" prop="numbers">
        <el-select
          v-model="diaForm.numbers"
          style="width: 100%"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        /></el-select>
      </el-form-item>
    </el-form>
  </public-dialog>
</template>
<script setup>
import { ref } from "vue";
const showDia = ref(false);
const diaFormRef = ref(null);
const diaForm = ref({
  name: "",
  projectNo: "",
  person: "",
  phone: "",
  numbers: "",
});
const options = ref(
    [
        { value: "1", label: "HTTP" },
        { value: "2", label: "HTTPS" },
        { value: "3", label: "FTP" },
        { value: "4", label: "SSH" },
        { value: "5", label: "Telnet" },
        { value: "6", label: "SMTP" },
        { value: "7", label: "POP3" },
    ]
)
const diaRules = ref({
  name: [
    { required: true, message: "请输入项目名称", trigger: "blur" },
    { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" },
  ],
  projectNo: [
    { required: true, message: "请输入项目编号", trigger: "blur" },
    { min: 1, max: 40, message: "长度", trigger: "blur" },
  ],
});

const funShowDia = () => {
  showDia.value = true;
};
const doSubmit = (type) => {
  if (type === "cancel") {
    diaForm.value = {};
    diaFormRef.value.resetFields();
    showDia.value = false;
    return;
  }
  diaFormRef.value.validate((valid) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!!");
      return false;
    }
  });
};
</script>
<style lang="scss">
.sys-setting {
  box-sizing: border-box;

  &-title {
    box-sizing: border-box;
    padding-bottom: 28px;
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e7e7e7;
    &-text {
      font-size: 20px;
      color: #000000f0;
      font-weight: bold;
    }
  }
}
</style>
